<template>
  <div class="container">
    精选题库
    <el-card class="box-card">
      <!-- 头部按钮 -->
      <div class="hea">
        <div class="text item">
          <el-button type="success" @click="xzst">新增试题</el-button>
        </div>
      </div>
      <!-- ------------------------------------------------------------------------------------------- -->
      <!-- 全部选项 -->
      <el-row :gutter="10">
        <!-- form表单 -->
        <el-form
          ref="ruleForm"
          :model="resetForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 第一列 -->
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <!-- 学科 -->
            <el-form-item label="学科" prop="subjectName">
              <el-select
                v-model="resetForm.subjectName"
                placeholder="请选择"
                @change="xugb"
              >
                <el-option
                  :label="item.subjectName"
                  :value="item.id"
                  v-for="item in ruleForm.region"
                  :key="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 试题类型 -->
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                v-model="resetForm.questionType"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in ruleForm.questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 题目备注 -->
            <el-form-item label="题目备注" prop="notes">
              <el-input v-model="resetForm.notes"></el-input>
            </el-form-item>
            <!-- </el-form> -->
            <!-- </div> -->
            <!-- <div class="grid-content bg-purple"></div> -->
          </el-col>
          <!-- 第二列 -->
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <!-- <div class="text item"> -->
            <!-- 二级目录 -->
            <!-- <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
            <el-form-item label="二级目录" prop="twoLevelDirectory">
              <el-select
                v-model="resetForm.twoLevelDirectory"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in ruleForm.twoLevelDirectory"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 难度 -->
            <el-form-item label="难度" prop="difficulty">
              <el-select
                v-model="resetForm.difficulty"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in ruleForm.difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- 企业简称 -->
            <el-form-item label="企业简称" prop="Abbreviation">
              <el-input v-model="resetForm.Abbreviation"></el-input>
            </el-form-item>
            <!-- </el-form> -->
            <!-- </div> -->
            <!-- <div class="grid-content bg-purple"></div> -->
          </el-col>
          <!-- 第三列 -->
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <!-- <div class="text item"> -->
            <!-- form表单 -->
            <!-- <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
            <!-- 标签 -->
            <el-form-item label="标签" prop="label">
              <el-select v-model="resetForm.label" placeholder="请选择">
                <el-option
                  v-for="item in ruleForm.label"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 方向 -->
            <el-form-item label="方向" prop="direction">
              <el-select v-model="resetForm.direction" placeholder="请选择">
                <el-option
                  v-for="item in ruleForm.direction"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 城市 -->

            <el-form-item label="城市" prop="provincess">
              <div class="cssj">
                <el-select v-model="resetForm.provincess" placeholder="请选择">
                  <el-option
                    v-for="item in ruleForm.provinces()"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <!-- 城市下的地区 -->
                <el-select
                  v-model="resetForm.citys"
                  placeholder="请选择"
                  prop="region"
                >
                  <el-option
                    v-for="item in ruleForm.citys(resetForm.provincess)"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <!-- 第四列 -->
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <!-- form表单 -->
            <!-- 关键字 -->
            <el-form-item label="关键字" prop="names">
              <el-input v-model="resetForm.names" value=""></el-input>
            </el-form-item>

            <!-- 录入人 -->
            <el-form-item label="录入人" prop="gly">
              <el-select v-model="resetForm.gly" placeholder="请选择">
                <el-option
                  v-for="item in ruleForm.gly"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-form-item>
                <el-button @click="resetsForm" class="qcan">清除</el-button>

                <el-button type="primary" @click="cxsj" class="cxan"
                  >查询</el-button
                >
              </el-form-item>
            </el-form-item>

            <!-- </div> -->
            <!-- <div class="grid-content bg-purple"></div> -->
          </el-col>
        </el-form>
      </el-row>
      <!-- ------------------------------------------------------------------------------------------------------------- -->
      <!-- 表格 -->
      <div>
        <el-tabs v-model="resetForm.zt" type="card" @tab-click="qhsjxs">
          <!-- <el-tab-pane label="全部" name="1"> -->
          <yl :queId="ylid" v-if="isShow" :isShow.sync="isShow"></yl>
          <el-tab-pane
            v-for="i in ruleForm.zt"
            :key="i.value"
            :label="i.label"
            :name="i.value"
          >
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="200px">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="100px">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="100px">
              </el-table-column>
              <el-table-column prop="questionType" label="题型" width="100px">
                <template slot-scope="scope">
                  <span v-if="scope.row.questionType == 1">单选</span>
                  <span v-if="scope.row.questionType == 2">多选</span>
                  <span v-if="scope.row.questionType == 3">简答</span>
                </template>
              </el-table-column>
              <el-table-column prop="question" label="题干" width="200px">
                <template slot-scope="scope">
                  <div v-html="scope.row.question"></div>
                </template>
              </el-table-column>
              <el-table-column prop="addDate" label="录入时间" width="200px">
                <template slot-scope="scope">
                  {{ setMyDate(scope.row.addDate) }}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度" width="100px">
                <template slot-scope="scope">
                  <span v-if="scope.row.difficulty == 1">简单</span>
                  <span v-if="scope.row.difficulty == 2">一般</span>
                  <span v-if="scope.row.difficulty == 3">困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="100px">
              </el-table-column>
              <el-table-column prop="chkState" label="审核状态" width="100px">
                <template slot-scope="scope">
                  <span v-if="scope.row.chkState == 0">待审核</span>
                  <span v-if="scope.row.chkState == 1">通过</span>
                  <span v-if="scope.row.chkState == 2">拒绝</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="200px">
              </el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="100px">
              </el-table-column>
              <el-table-column
                prop="publishState"
                label="发布状态"
                width="100px"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.publishState == 0 && scope.row.chkState == 1
                    "
                    >已发布</span
                  >
                  <span
                    v-if="scope.row.chkState == 0 || scope.row.chkState == 2"
                    >待发布</span
                  >
                  <span
                    v-if="
                      scope.row.publishState == 1 && scope.row.chkState == 1
                    "
                    >已下架</span
                  >
                </template>
              </el-table-column>
              <!-- fixed固定到左边还是右边 -->
              <!-- 操作区域 -->
              <el-table-column
                fixed="right"
                prop="addDate"
                label="操作"
                width="200px"
              >
                <template slot-scope="scope">
                  <div class="cz">
                    <el-link type="primary" @click="ylsj(scope.row.id)"
                      >预览</el-link
                    >
                    <!-- 审核 -->
                    <el-link
                      type="primary"
                      @click="dialogFormVisible = true"
                      :disabled="
                        scope.row.chkState == 1 || scope.row.chkState == 2
                      "
                      >审核</el-link
                    >
                    <el-dialog
                      width="20%"
                      title="审核"
                      append-to-body
                      :visible.sync="dialogFormVisible"
                    >
                      <el-form :model="form">
                        <!-- <template> -->
                        <el-radio v-model="resetForm.radio" value="1" label="1"
                          >通过</el-radio
                        >
                        <el-radio v-model="resetForm.radio" label="2" value="2"
                          >拒绝</el-radio
                        >
                        <el-input
                          type="textarea"
                          :rows="2"
                          placeholder="请输入内容"
                          v-model="resetForm.textareaa"
                          value=""
                        >
                        </el-input>
                        <!-- </template> -->
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false"
                          >取 消</el-button
                        >
                        <el-button type="primary" @click="tjshsj(scope.row.id)"
                          >确 定</el-button
                        >
                      </div>
                    </el-dialog>
                    <!-- 修改 -->
                    <el-link
                      type="primary"
                      @click="xg(scope.row.id)"
                      :disabled="scope.row.publishState == 1 ? false : true"
                      >修改</el-link
                    >
                    <!-- 上架下架 -->
                    <el-link
                      type="primary"
                      v-if="scope.row.publishState == 1"
                      :disabled="
                        (scope.row.publishState == 1 &&
                          scope.row.chkState == 0) ||
                        scope.row.chkState == 2
                          ? true
                          : false
                      "
                      @click="
                        sjxj(scope.$index, scope.row, scope.row.publishState)
                      "
                      >上架</el-link
                    >
                    <el-link
                      type="primary"
                      v-if="scope.row.publishState == 0"
                      @click="
                        sjxj(scope.$index, scope.row, scope.row.publishState)
                      "
                      :disabled="
                        (scope.row.publishState == 0 &&
                          scope.row.chkState == 0) ||
                        scope.row.chkState == 2
                          ? true
                          : false
                      "
                      >下架</el-link
                    >
                    <!-- 删除 --
 $index是当前行索引,row是当前行数据 -->
                    <el-link
                      type="primary"
                      @click="sc(scope.$index, scope.row)"
                      :disabled="scope.row.publishState == 1 ? false : true"
                      >删除</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table></el-tab-pane
          >
        </el-tabs>
        <!-- 分页 -->
        <el-pagination
          :current-page="ys"
          @current-change="fybh"
          background
          layout="prev, pager, next"
          :total="totle"
          :page-size="2"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import yl from '../components/questions-preview'
// 获取类型,基础题库详细,删除,上下架
// eslint-disable-next-line no-unused-vars
import { choice, remove, choicePublish, choiceCheck } from '../../api/hmmm/questions'
// 获取学科列表,学科详细
// eslint-disable-next-line no-unused-vars
import { list, detail } from '../../api/hmmm/subjects'
// 获取简单标签
import { simple } from '../../api/hmmm/tags'
// 表单数据 试题类型,困难程度,方向
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
// 导入城市 城市,城市下的地区
import { provinces, citys } from '../../api/hmmm/citys'
// 获取二级目录
import { simple as ejml } from '../../api/hmmm/directorys'
// 格式化事件
import { setMyDate } from '.././../utils/index'
// 创建录入人
const gly = [{
  value: 1,
  label: '超级管理员'
}, {
  value: 2,
  label: '录入管理员'
}]
// 创建状态
const zt = [{
  value: '-1',
  label: '全部'
}, {
  value: '0',
  label: '待审核'
}, {
  value: '1',
  label: '通过'
}, {
  value: '2',
  label: '拒绝'
}

]
export default {
  // 数据
  data () {
    // ruleform外的为双向数据绑定的值
    return {
      resetForm: {
        // 学科
        subjectName: null,
        // 二级目录
        twoLevelDirectory: '',
        // 使用的标签
        label: '',
        // 关键字
        names: '',
        // 试题类型
        questionType: '',
        // 表格首先展示的
        activeName: 'first',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        gly,
        // 题目备注
        notes: '',
        // 企业简称
        Abbreviation: '',
        // 城市
        provincess: '',
        // 城市下的地区
        citys: '',
        // 审核的结果
        radio: '1',
        // 审核text的数据
        textareaa: '',
        // 状态
        zt: '-1'

      },
      // 获取到的数据
      ruleForm: {
        // 学科数据,试题类型
        region: [],
        // 二级目录
        twoLevelDirectory: [],
        // 标签
        label: [],
        // 试题类型
        questionType,
        // 难度
        difficulty,
        // 方向
        direction,
        // 录入人
        gly,
        // 城市
        provinces,
        // 城市下的地区
        citys,
        // 标题
        zt,
        // 预览
        yl
      },
      form: {
        region: ''
      },
      isShow: false,
      ylid: null,
      // 全部的精选题目数据
      tableData: [],
      // 总条数
      totle: 0,
      // 审核时间数据
      dialogFormVisible: false,
      // 上架下架数据
      // 当前页数
      ys: 1,
      for: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  // 初始化生命周期函数
  created () {
    this.getsj()
    // 获取学科数据
    this.getlb()
    this.getjdlb()
    // this.detail()
  },
  // 事件处理函数
  methods: {
    // 格式化事件
    setMyDate (data) {
      return setMyDate(data)
    },
    // 预览
    ylsj (e) {
      // 修改封装组件的状态
      this.isShow = true
      // 获取id
      this.ylid = e
      console.log(e)
    },
    // 新增试题
    xzst () {
      this.$router.push({ name: 'questions-new' })
    },
    // 获取学科列表
    async getlb () {
      // 传入每页显示的条数
      const params = {
        // 当前在第几页
        page: 1,
        // 每页展示的数据条数
        pagesize: 20
      }
      const { data } = await list(params)
      this.ruleForm.region = data.items
    },
    // 学科改变把值赋值给二级目录
    async xugb () {
      console.log(this.resetForm.subjectName)
      const params = {
        // subjectID: this.resetForm.subjectName
        state: '0'
      }
      if (this.resetForm.subjectName !== null) {
        params.subjectID = this.resetForm.subjectName
      }
      const { data } = await ejml(params)
      console.log(data)
      // 把二级目录的数据传给data数据中
      this.ruleForm.twoLevelDirectory = data
    },
    // 获取简单标签
    async getjdlb () {
      const { data } = await simple()
      this.ruleForm.label = data
    },
    // 查询事件
    cxsj () {
      this.ys = 1
      // console.log(this.ys)
      this.getsj()
    },
    // 获取表格数据
    async getsj () {
      console.log(this.ys)
      const params = {
        // 当前在第几页
        page: this.ys,
        // 每页展示的数据条数
        pagesize: 2,
        // 学科
        subjectID: this.resetForm.subjectName,
        // 难度
        difficulty: this.resetForm.difficulty,
        // 试题类型
        questionType: this.resetForm.questionType,
        // 标签名称
        tags: this.resetForm.label,
        // 企业所在省份
        province: this.resetForm.provincess,
        // 企业所在城市
        city: this.resetForm.citys,
        // 关键字
        keyword: this.resetForm.names,
        // 题目备注
        remarks: this.resetForm.notes,
        // 企业简称
        shortName: this.resetForm.Abbreviation,
        // 方向
        direction: this.resetForm.direction,
        // 录入人
        creatorID: this.resetForm.gly
      }
      // 判断审核状态
      if (this.resetForm.zt !== '-1') {
        params.chkState = this.resetForm.zt
      }
      // console.log(params)
      const { data } = await choice(params)
      console.log(data)
      this.tableData = data.items
      this.totle = data.counts
    },
    // 学科详细
    // 提交审核数据，并且关闭弹框
    async tjshsj (id) {
      // 关闭弹框
      this.dialogFormVisible = false
      // 提交数据
      // 审核的内容
      const data = {
        id,
        chkState: Number(this.resetForm.radio),
        chkRemarks: this.resetForm.textareaa
      }
      await choiceCheck(data)
      this.getsj()
    },
    // 审核数据弹框
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 清楚选中的内容
    resetsForm () {
      // console.log()
      this.$refs.ruleForm.resetFields()
      this.getsj()
    },
    // 修改数据
    xg (e) {
      console.log(e
      )
      this.$router.push({
        name: 'questions-new',
        params: {
          id: e
        }
      })
    },
    // 上下架
    async sjxj (i, row, state) {
      console.log(state)
      const dataa = {
        id: row.id,
        publishState: state === 1 ? 0 : 1
      }
      console.log(dataa)
      const { data } = await choicePublish(dataa)
      console.log(data)
      // 重新获取数据
      this.getsj()
    },
    // 分页
    fybh (e) {
      this.ys = e
      this.getsj()
    },
    // 删除精题数据
    async sc (i, row) {
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确认',
        concelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // console.log(i, row)
          console.log(row.id)
          const dataa = {
            id: row.id
          }
          console.log(dataa)
          const { data } = await remove(dataa)
          console.log(data)
          this.$message({
            message: '删除成功', type: 'success'
          })
        } catch (error) {
          console.warn(error)
        }
      }).catch(() => {
        this.$message({
          message: '删除失败'
        })
      })
      // 重新获取数据
      this.getsj()
    },
    // 切换状态重新获取数据
    qhsjxs () {
      this.getsj()
    }
  },
  components: {
    yl
  }
}
</script>

<style scoped lang='less'>
.hea {
  margin-top: 0;
  width: 100%;
  height: 70px;
}
.cssj {
  display: flex;
  justify-content: space-between;
}
.box-card {
  overflow: hidden;
}
.text {
  float: right;
  font-size: 14px;
}

.item {
  padding: 18px 0;
  padding-right: 30px;
}

.box-card {
  width: 100%;
}

.cz {
  display: flex;
  justify-content: space-between;
}
.cxan {
  float: left;
}
.qcan {
  margin-right: 20px;
  float: left;
}
</style>
